<template>
  <div class="view-upload">
    <n-card>
      <n-h2 prefix="bar">
        <n-text type="primary">文件上传</n-text>
      </n-h2>
      <div>
        <pro-upload ref="proUploadRef" v-bind="config" />
      </div>
      <div style="margin-top: 10px">
        <div>当前上传结果:</div>
        <div>
          {{ proUploadRef ? proUploadRef.getUploadResult() : [] }}
        </div>
      </div>
    </n-card>
    <n-card class="upload">
      <n-h2 prefix="bar">
        <n-text type="primary">弹窗内文件上传</n-text>
      </n-h2>
      <n-button @click="show = true">点击打开弹窗</n-button>
      <pro-dialog
        v-model:showDialog="show"
        v-model:modalProps="modalProps"
        :showButton="false"
      >
        <div>
          <pro-upload v-bind="config" />
        </div>
      </pro-dialog>
    </n-card>
  </div>
</template>
<script lang="ts" setup name="upload">
  const config = reactive({
    http: {
      action: '/upload'
    },
    maxFileSize: 1024 * 1024 * 20
  })

  const show = ref(false)
  const modalProps = ref({
    show: false
  })

  const proUploadRef = ref(null)
</script>
<style lang="less" scoped>
  .upload {
    margin-top: 20px;
  }
</style>
